import './index.less';

import { SearchOutlined } from '@ant-design/icons';
import { Input, InputProps, InputRef } from 'antd';
import React from 'react';

const { Group, Search, TextArea, Password } = Input;

interface CompoundedComponent extends React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> {
  Group: typeof Group;
  Search: typeof Search;
  TextArea: typeof TextArea;
  Password: typeof Password;
}

const SearchInput = React.forwardRef<CompoundedComponent, any>((props, ref) => {
  return (
    <Input
      className="component-style-search-input"
      prefix={<SearchOutlined style={{ color: '#A7AFB7' }} />}
      ref={ref}
      {...props}
    />
  );
});

SearchInput.displayName = 'Example';

export default SearchInput;
